<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../css/activityoverview.css"/>
		<style>
			.mui-control-content {
				background-color: white;
				/*min-height: 550px;*/
			}
			#sliderSegmentedControl .mui-active{
				color: #EB7A77;
			}
			.mui-bar-nav{
				border: none;
				outline: none;
				-webkit-box-shadow:none;
				box-shadow:none;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav header" style="background-color: white;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">活动总览</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">已参加</a>
					<a class="mui-control-item" href="#item2mobile">已发布</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="">
								<div id="joinactivity">
									<div class="content_content" v-for="join in add" :id="join.id">
										<div class="content_content_div">
											<div class="mui-row" >
												<div class="content_content_div_left mui-col-xs-2">
													<img class="avater" :src="join.avatar"/>
												</div>
												<div class="content_content_div_right mui-col-xs-10">
													<h4 style="margin-top: 10px;" v-text="join.username"></h4>
													<h5 class="content_content_div_right_title" v-text="join.activityName"></h5>
													<div class="content_content_div_right_content">
														<div class="mui-ellipsis-3 content_content_div_right_content_word" v-text="join.activityContent">
															
														</div>
														<div class="content_content_div_right_content_img mui-content-padded" v-if="join.img!=''&&join.img!=null&&join.img!=undefined">
															<img :src="join.img"/>
														</div>
													</div>
													<h6 class="mui-text-right" v-text="join.activityDate"></h6>
												</div>
											</div>
										</div>
									</div>
								</div>		
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div id="release">
									<div class="content_content" v-for="join in release" v-bind:id="join.id">
										<div class="content_content_div">
											<div class="mui-row" >
												<div class="content_content_div_left mui-col-xs-2">
													<img class="avater" :src="join.avatar"/>
												</div>
												<div class="content_content_div_right mui-col-xs-10">
													<h4 style="margin-top: 10px;" v-text="join.username"></h4>
													<h5 class="content_content_div_right_title" v-text="join.activityName"></h5>
													<div class="content_content_div_right_content">
														<div class="mui-ellipsis-3 content_content_div_right_content_word" v-text="join.activityContent">
														</div>
														<div class="content_content_div_right_content_img mui-content-padded" v-if="join.img!=''&&join.img!=null&&join.img!=undefined">
															<img style="border: none"  :src="join.img"/>
														</div>
													</div>
													<h6 class="mui-text-right" v-text="join.activityDate"></h6>
												</div>
											</div>
										</div>
									</div>
								
								
								</div>
							</div>
						</div>

					</div>
					
				</div>
			</div>

		
		</div>







		<script src="../js/mui.min.js"></script>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ip.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
					swipeBack: false
				});
			//本页面的视图显示
			
			
			
			mui.plusReady(function(){
				mui.ajax('http://'+ip+'/xiaojv/Api/index.php?p=front&m=activity&a=activityoverview',{
					data:{},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；           
					success:function(data){
						appdataone = data.one;
						var one = new Vue({
							el : '#joinactivity',
							data : {
								add : appdataone
							}
						});
						appdatatwo = data.two;
						var two = new Vue({
							el : '#release',
							data : {
								release : appdatatwo
							}
						});
						//点击活动跳转到活动详情页面
						var activity = document.querySelectorAll('.content_content');
						for (var i=0;i<activity.length;i++) {
							activity[i].addEventListener("tap",function () {
								activityid = this.getAttribute('id');
								mui.openWindow({
									    url:'activitydetails.html',
									    extras:{activityid:activityid}
							  	});
							});
						}
						
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			});
			
			
			
			
		
			
			//页面的显示高度
			var height = document.documentElement.clientHeight || document.body.clientHeight;
			var h = height-68;
		    var tags=document.getElementsByClassName('mui-control-content');
		  	var hz = h+"px";
		  	for (var i=0;i<tags.length;i++) {
		  		tags[i].style.height = hz;
		  	}
			
			
			
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				
			})(mui);
			
		</script>
	</body>

</html>